<template>
  <div class="hot-search">
    <div class="box">
      <div class="hot-info" 
        v-for="(item,index) in data" 
        :key="index"
        @click="songClick(item,index)">
        <div class="search-num">
          <span :class="{ on:index <= 2 }">{{index + 1}}</span>
        </div>
        <div class="search-name">
          <span>{{ item.first ? item.first : item.searchWord }}</span>
        </div>
        <!-- <div></div> -->
      </div>
      <div v-if="allTag == true" class="seeAll" @click="allHotSearch">
        <span>
          展开更多热搜
          <svg t="1639638240522" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2964" width="200" height="200"><path d="M806.4 319.2L512 613.6 221.6 323.2 176 368l290.4 290.4L512 704l45.6-45.6 294.4-294.4z" p-id="2965"></path></svg>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      data:Array,
    },

    data() {
      return {
        allTag:true,
      }
    },

    methods:{
      allHotSearch(){
        // console.log('111');
        this.allTag = false;
        this.$emit('allhotsearch');
      },

      songClick(item,index){
        console.log(item);
      }
    }
  }
</script>

<style scoped>
.hot-search{
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 10px;
  /* padding: 10px; */
}

.box{
  display: flex;
  flex-wrap: wrap;
  padding-left: 25px;
  padding-top: 10px;
}

.hot-info{
  display: flex;
  align-items: center;
  width: 50%;
  padding-bottom: 5px;
  font-size: 14px;
}

.search-num{
  width: 25px;
}

.search-name{
  font-size: 13px;
}

.on{
  color: red;
}

.seeAll{
  display: flex;
  width: 80%;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}

.seeAll .icon{
  font-size: 1em;
}

</style>